<template>
  <div class="overview">
    <div class="table_list">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-button plain icon="el-icon-refresh" @click="getMenuList()" />
        <el-button
          type="primary"
          @click="isCreationDialogVisible = true"
        >添加</el-button>
      </el-form>
      <el-table
        v-loading="loading"
        row-key="id"
        border
        stripe
        :data="dataList"
        style="width: 100%"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @row-dblclick="dblclickRow"
      >

        <el-table-column
          prop="id"
          label="id"
          width="170"
        />
        <el-table-column
          prop="title"
          label="标题"
          width="170"
        />
        <el-table-column
          prop="icon"
          label="图标"
          width="170"
        >
          <template slot-scope="scope">
            <!-- {{ scope.row.icon.indexOf('el-icon') !== -1 }} -->
            <i v-if="isIncludeIcon(scope.row.icon)" :class="scope.row.icon" />
            <svg-icon v-if="isIncludeSvg(scope.row.icon)" :icon-class="scope.row.icon" />
            <!-- <svg-icon v-else icon-class="guanbi12px" /> -->
          </template>

        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="170"
        />
        <el-table-column
          prop="weigh"
          label="权重"
          width="170"
        />
        <el-table-column
          prop="ismenu"
          label="菜单"
          width="170"
        >
          <div slot-scope="scope">
            <el-switch
              v-model="scope.row.ismenu"
              :active-value="1"
              :inactive-value="2"
              @change="handleChangeMenu(scope.row)"
            />
          </div>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 通过方法判断是否显示操作按钮 -->
            <div class="table-buttons">
              <!-- <el-button class="table-buttons__item" plain round size="small" @click="handleEditClick(scope.row)">保存</el-button>
              <el-button class="table-buttons__item" plain round size="small" @click="handleRemoveClick(scope.row)">删除</el-button> -->
              <el-button type="text" icon="el-icon-edit" circle @click="handleTableEditClick(scope.row)" />
              <el-button type="text" icon="el-icon-delete" circle @click="handleRemoveClick(scope.row)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 创建 -->
    <CreateMenu
      :is-creation-dialog-visible="isCreationDialogVisible"
      @setCreateState="isCreationDialogVisible = true"
      @RoleCreationClose="isCreationDialogVisible = false"
    />

    <!-- 编辑 -->
    <EditMenu
      :edit-data="currentSelectTableItem"
      :is-ediht-dialog-visible="isEdihtDialogVisible"
      @handleEditClick="isEdihtDialogVisible = true"
      @RoleEditClose="isEdihtDialogVisible = false"
    />

    <!-- 删除 -->
    <DeleteMenu
      :is-remove-dialog-visible="isRemoveDialogVisible"
      :info="currentSelectTableItem"
      @InputRemoveClose="isRemoveDialogVisible = false"
    />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { menu_list, MerchantEditMenuItem } from '@/api/menu'
import CreateMenu from './CreateMenu'
import EditMenu from './EditMenu'
import DeleteMenu from './DeleteMenu'
export default {
  name: 'Dashboard',
  components: {
    CreateMenu,
    EditMenu,
    DeleteMenu
  },
  data() {
    // 这里存放数据
    return {
      isCreationDialogVisible: false,
      isEdihtDialogVisible: false,
      isRemoveDialogVisible: false,
      loading: false,
      dataList: [],
      searchForm: {
        transaction_type: 'all',
        trading_status: 'all',
        product_info: 'all',
        address: ''
      },
      detail_visible: false,
      currentSelectTableItem: {},
      checkData: {}
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.getMenuList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  // 生命周期 - keep-alive
  async activated() { },
  // 方法集合
  methods: {

    // 是否 element icon
    isIncludeIcon(icon) {
      if (typeof (icon) === 'string') {
        return icon.includes('el-icon')
      } else {
        return false
      }
    },
    // 是否 svg
    isIncludeSvg(svg) {
      if (typeof (svg) === 'string') {
        return svg
      } else {
        return false
      }
    },
    // 更改菜单
    async handleChangeMenu(item) {
      this.loading = true

      try {
        const res = await MerchantEditMenuItem(item.id, item)

        this.$messageOnce({
          message: res.msg,
          type: 'success'
        })
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    async getMenuList() {
      this.loading = true

      try {
        const res = await menu_list()
        // 内容
        this.dataList = res.data
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    handleRemoveClick(val) {
      // 缓存值
      this.currentSelectTableItem = val
      this.isRemoveDialogVisible = true
    },
    dblclickRow(row) {
      this.checkData = row
      this.detail_visible = true
    },
    exportData() {

    },
    handleDetailClick(val) {
      this.isDetailDialogVisible = val
    },
    handleTableEditClick(val) {
      // 缓存值
      this.currentSelectTableItem = val
      // 打开编辑
      this.isEdihtDialogVisible = true
    },
    setCreateState(val) {
      this.isCreationDialogVisible = val
    },
    setTipVisible(val) {
      this.tipVisible = val
    },
    setDeleteVisible(val) {
      this.deleteVisible = val
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next(vm => {

    })
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>

<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
.overview{
  width: 1580px;
  margin: 0 auto;
  background-color: #f6f6f6;
  .table_list{
    width: 1580px;
    // height: 644px;
    background: #FFFFFF;
    box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-top: 20px;
    padding: 30px;
    overflow: auto;
    .title{
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #434343;
      line-height: 30px;
      margin-bottom: 30px;
    }
  }
}

</style>
